<template>
  <div class="animeList">
    <div class="list-top">
      <div v-for="(item1, index1) in header" :key="'list1' + index1">
        {{ item1 }}
      </div>
    </div>
    <div class="list-box" @mouseleave="mouseLeave" @mouseover="mouseOver" :key="key">
      <div
        v-for="(item, index) in watchList"
        :class="`list-item list-item-${itemClass}`"
        :key="'list2' + index"
        @click="rowClick(index)"
      >
        <div class="list-top item-box" :class="indexStatus==index?'rowBg':''">
          <div v-for="(propitem, indexprop) in prop" :key="'prop' + indexprop">
            <span :title="item && item[propitem]">{{
              item && item[propitem]
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="ScrollList">
import anime from 'animejs';
import {  ref, watch, toRefs, onMounted } from 'vue';

const props = defineProps({
  header: {
    type: Array,
    default: () => ['时间','ip','地址'],
  },
  list: {
    type: Array,
    default: () => [{
      data:1,
      ip:1,
      url:1
    }],
  },
  prop: {
    type: Array,
    default: () => ['data','ip','url'],
  },
});
const { header, list, prop } = toRefs(props)

let animation = ref(null);
const indexStatus = ref(null);
const key = ref(0);
const itemClass = ref('');
const watchList = ref([]);

watch(
  list,
  (newValue) => {
    watchList.value = newValue;
    animeList();
  }
);

const mouseLeave = () => {
  animation.play();
  
};
const mouseOver = () => {
  animation.pause();
};
const animeList = async () => {
  let item = await watchList.value[0];
  if (item) {
    watchList.value.push(item);
    var elements = document.querySelectorAll(`.list-item-${itemClass.value}`)[0];
    animation = anime({
      targets: elements,
      translateY: -40,
      height: 0,
      opacity: 0.2,
      easing: 'cubicBezier(.5, .05, .1, .3)',
      duration: 1500,
      autoplay: true,
      complete: () => {
        watchList.value.splice(0, 1);
        if (indexStatus.value > 0) {
          indexStatus.value--;
        } else if (indexStatus.value == 0) {
          indexStatus.value = watchList.value.length - 1;
        }
        key.value++;
        animeList();
      }
    });
  }
};
const rowClick = (index) =>{
  if (indexStatus.value==index) {
    indexStatus.value = null;
  }else{
    indexStatus.value = index;
  }
}
const randomNumber = () => {
  itemClass.value = guid();
};
const guid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == 'x' ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

onMounted(()=>{
  randomNumber();
})
</script>

<style lang="scss" scoped>
.animeList {
  width: 446px;
  margin: 0 auto;
}
.list-top {
  width: 446px;
  height: 40px;
  line-height: 38px;
  display: flex;
  justify-content: space-around;
  background: rgba(22, 81, 154, 0.7);
  font-family: 'PingFangSC-Medium';
  color: rgba(230, 247, 255, 0.65);
  font-size: 20px;
  font-weight: 500;
  & > :nth-child(1) {
    width: 10%;
  }
  & > div {
    width: 30%;
    padding: 0 5px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-x: hidden;
    & > span {
      cursor: pointer;
    }
  }
}
.list-box {
  overflow-y: auto;
  height: 400px;
  width: 100%;
  scrollbar-width: none;
  ::v-deep {
    .el-rate__icon {
      margin-right: 0px;
    }
  }
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
.list-item {
  width: 100%;
  height: 40px;
}
.item-box {
  height: 34px;
  line-height: 34px;
  background: rgba(142, 201, 255, 0.1);
  font-family: 'PingFangSC-Regular';
  font-size: 18px;
  color: #cff0ff;
  font-weight: 400;
}
.rowBg{
  background: url("../../../../assets/images/selectBackground.png") no-repeat !important;
  background-size: 100% 100% !important;
}
</style>
